<template>
  <div>
    <Modal :mask-closable="false"
           v-model="modalState"
           :title="`${$t('common.Import')}`"
           class-name="importExcelModal vertical-center-modal"
           @on-cancel="closeClick"
           :closable="false"
           :footer-hide="true"
           class="modal-wrap-layout"
    >

      <div class="content">
        <div class="upload">
          <div class="importBtn">
            <Upload
              :on-success="upload"
              :on-error="uploadErro"
              :before-upload="beforeUpload"
              :on-progress="onProgress"
              :show-upload-list="false"
              :headers="headers"
              type="drag"
              :action="action"
            >
              <img src="~images/common/importImg.png" alt/>
            </Upload>
          </div>
          <span>{{$t('common.importfile')}}</span>
        </div>

        <Progress :percent="uploadProgress"
                  :stroke-width="20"
                  v-show="uploadProgress > 0"
                  status="active"
                  text-inside/>

        <button class="closeBtn" @click="closeClick">{{ $t('common.close') }}</button>
      </div>
    </Modal>
    <Modal :mask-closable="false" class="infoModel" width="550" v-model="infoState" @on-cancel="infoCancel">
      <div class="content">
        <p v-html="infoText"></p>
      </div>
    </Modal>
  </div>
</template>

<script>
  const isTong = process.env.NODE_ENV === 'tong';
  let ksiot = '';
  if (isTong) {
    ksiot = ''
  }
  export default {
    name: 'importExcel',
    props: ['importExcelStateF', 'assetsNo', 'isUpdate', 'url'],
    data() {
      return {
        uploadProgress: 0,
        madalUpdate: this.isUpdate,
        modalState: this.importExcelStateF,
        uploadFiles: {},
        headers: {
          token: localStorage.getItem('ziyunFactoryPortalToken'),
        },
        infoState: false,
        infoText: '',
        action: '',
      }
    },
    mounted() {
      if (this.$route.path === '/spareParts/attachmentAccount/account') {//备品台账
        this.action = `${ksiot}/dms/standingBook/importStandingBooks`
      }
      if (this.$route.path === '/spareParts/attachmentProcurement/procurement') {//备品采购
        this.action = `${ksiot}/dms/backup/purchase/importPurchases`
      }
      if (this.$route.path === '/spareParts/dataAdministration/storeHouse') {//仓库配置
        this.action = `${ksiot}/dms/dmsBackupConfig/backupImport`
      }
      if (this.$route.path === '/spareParts/dataAdministration/goodsShelves') {//货架配置
        this.action = `${ksiot}/dms/dmsBackupShelfConfig/backupShelfConfigImport`
      }
      if (this.$route.path === '/spareParts/dataAdministration/location') {//库位配置
        this.action = `${ksiot}/dms/dmsBackupLocationConfig/backupLocationConfigImport`
      }
      if (this.$route.path === '/spareParts/dataAdministration/material') {//物料配置
        this.action = `${ksiot}/dms/dmsBackupMaterielConfig/backupMaterielConfigImport`
      }
      if (this.$route.path === '/devBasic/basicData/deviceDepreciation') {//设备折旧
        this.action = `${ksiot}/dms/assetCategory/import`
      }
      if (this.$route.path === '/userManage') {
        this.action = `${ksiot}/basic/user/import`
      }
      if (this.$route.path === '/cutter/basis/processFlow') {
        this.action = `${ksiot}/tms/tmProcess/import`
      }
      if (this.$route.path === '/cutter/basis/materialConfig') {
        this.action = `${ksiot}/tms/material/import`
      }
      if (this.$route.path === '/cutter/basis/transcode') {
        this.action = `${ksiot}/tms/tmKnifeEncode/import`
      }
      if (this.$route.path === '/cutter/basis/knifeBom') {
        this.action = `${ksiot}/tms/bom/import`
      }
      if (this.$route.path === '/cutter/storage') {
        this.action = `${ksiot}/tms/handle/import`
      }
      if (this.$route.path === '/cutter/productManage/standbyKnifePreserve' && this.importExcelTag === 'bindMachine') {
        this.action = `${ksiot}/tms/bind/import`
      }
      if (this.$route.path === '/dictionaries') {
        this.action = `${ksiot}/dms/dict/import`
      }
      if (this.$route.path === '/cutter/productManage/standbyKnifePreserve' && this.importExcelTag === 'productionTakt') {
        this.action = `${ksiot}/tms/cycle/import`
      }
      if (this.$route.path === '/dncManage/basisData') {
        this.action = `${ksiot}/dncApi/dncBom/import`
      }
      if (this.$route.path === '/fault/basicConfig/faultClassify') { // 故障分类
        this.action = `${ksiot}/dms/faultCategory/import`
      }
      if (this.$route.path === '/fault/basicConfig/faultType') { // 故障类型
        this.action = `${ksiot}/dms/faultType/import`
      }
      if (this.$route.path === '/fault/basicConfig/upgrade') { // 升级机制
        this.action = `${ksiot}/dms/upgrade/import`
      }
      if (this.$route.path === '/productionInterval') { // 生产节拍
        this.action = `${ksiot}/dms/interval/import`
      }
      if (this.$route.path === '/screenManagement') { // 大屏管理
        this.action = `${ksiot}/dms/large/screen/import`
      }
      if (this.$route.path === '/billWithManagement') { // 关账管理
        this.action = `${ksiot}/dms/year/month/import`
      }
      if (this.$route.path === '/docManagement/maintainKnowLedge') { // 维修知识库
        this.action = `${ksiot}/dms/knowledgeBase/importKnowledgeBase`
      }
      if (this.$route.path === '/devBasic/equipmentsLedgerManagement/equipmentsLedger') {
        if (this.madalUpdate == 1) {
          this.action = `${ksiot}/dms/device/import?type=insert`
        } else if (this.madalUpdate == 2) {
          this.action = `${ksiot}/dms/device/import?type=update`
        } else {
          this.action = `${ksiot}/dms/dmsDeviceTz/import`
        }
      }
      if (this.$route.path === '/productionShift') { // 维修知识库
        this.action = `${ksiot}/dms/productionShift/import`
      }
      if (this.$route.path === '/devScene/configuration/processMode') {
        this.action = `${ksiot}/workorder/workorderDealType/import`
      } else if (this.$route.path === '/devScene/configuration/materialList') {
        this.action = `${ksiot}/workorder/workorderTool/import`
      } else if (this.$route.path === '/devBasic/earlierStage/pdebugging') {
        this.action = `${ksiot}/dms/dmsInstallPlan/importPlans?assetsNo=${this.assetsNo}`
      } else if (this.$route.path === '/devScene/maintain/project') {
        this.action = `${ksiot}/dms/dcmMaintainItem/import`
      } else if (this.$route.path === '/devScene/maintain/plan') {
        this.action = `${ksiot}/dms/dcmMaintainPlan/import`
      } else if (this.$route.path === '/spareParts/inventory/plan') {
        this.action = `${ksiot}/dms/dmsBackupPlan/import`
      } else if (this.$route.path === '/moldManagement/moldLedger') {//工装台账
        this.action = `${ksiot}/dms/moldinfo/import?type=insert`
      } else if (this.$route.path === '/moldManagement/moldMaintenance/items') {//工装管理-配置
        this.action = `${ksiot}/dms/servicingItem/import?type=insert`
      } else if (this.$route.path === '/materialMaintenance/materialClassificationDefinition') {//物料维护-物料分类定义
        this.action = `${ksiot}/dms/material-type/import`
      } else if (this.$route.path === '/materialMaintenance/materialDefinition') {//物料维护-物料定义
        this.action = `${ksiot}/dms/material/import`
      } else if (this.$route.path === '/materialMaintenance/unitDefinition') {//物料维护-计量单位定义
        this.action = `${ksiot}/dms/unit/import`
      }

      if (this.url)
        this.action = this.url
    },
    methods: {
      onProgress(event, file, fileList) {
        console.log(event);
        this.uploadProgress = event.percent - 1;
        console.log(this.uploadProgress);
      },
      closeClick() {
        this.modalState = false
        this.$emit('importExcelChange')
      },
      beforeUpload(file) {
        this.uploadProgress = 1;
        this.uploadFile = file
        let reg = /\.(xlsx)|(xls)$/
        if (!this.uploadFile.name.toLowerCase().match(reg)) {
          this.$Message.warning(({content: "请上传excel文件！", duration: 6, closable: true}));
          this.uploadFiles = ''
          return false
        }
      },
      upload(res) {
        this.uploadProgress = 100;
        if (res.code == 200) {
          if (res.data && res.data.success) {
            this.modalState = false
          }
          this.$emit('importExcelChange', 'success')
          this.$emit('importExcelChangepub', res)
          // if (res.data.success){
          //   this.$Message.success(res.msg)
          // }
          if (res.data && res.data.messages && res.data.messages.length && !res.data.success) {
            this.$Message.success(({content: res.data.messages.join(','), duration: 6, closable: true}));
          } else {
            this.$Message.success({content: res.msg})
          }
        } else {
          this.$emit('importExcelChange', 'error', res.data);
          if (res.data && res.data.errorInfo && res.data.errorInfo.length) {
            this.$Message.warning(({content: res.data.errorInfo.join(','), duration: 6, closable: true}));
          } else {
            if (res.data && res.data.messages && res.data.messages.length) {
              this.$Message.warning(({content: res.data.messages.join(','), duration: 6, closable: true}));
            } else {
              this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
            }
          }

          // }
        }
      },
      uploadErro(response) {
        this.$Message.warning({content: response, duration: 6, closable: true})
      },
      infoCancel() {
        this.infoState = false
      },
    },
  }
</script>

<style lang="scss">
  .importExcelModal {
    .content {
      height: 380px;

      .upload {
        .importBtn {
          position: relative;
          width: 175px;
          margin: 0 auto;
          margin-top: 30px;
          text-align: center;

          img {
            width: 175px;
            height: 150px;
            margin-left: -35px;
            margin-bottom: 20px;
          }

          input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
          }

          .ivu-upload:hover {
            border-color: #ffffff;
          }
        }

        span {
          display: block;
        }

        span {
          margin-bottom: 50px;
          font-size: 13px;
          text-align: center;
          line-height: 15px;
          color: #333;
        }
      }

      .uploadSucc,
      .uploadErr {
        text-align: center;

        i {
          margin-top: 70px;
          margin-bottom: 45px;
          font-size: 50px;
          color: #1294f7;
        }

        span {
          display: block;
          margin-bottom: 90px;
          font-size: 13px;
          line-height: 13px;

          a {
            position: relative;
            text-decoration: underline;
            color: #2296f4;

            input {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
            }
          }
        }
      }

      .uploadErr {
        i {
          color: #ff3e68;
        }
      }

      .closeBtn {
        display: block;
        width: 140px;
        height: 40px;
        margin: 0 auto;
        margin-top: 30px;
        color: #333;
        background-color: #eee;
        cursor: pointer;
        border: 0px;
        font-size: 14px;
      }

      .closeBtn:hover {
        opacity: 0.8;
      }
    }

    &.vertical-center-modal {
      display: flex;
      align-items: center;
      justify-content: center;

      .ivu-modal {
        top: 0;
      }
    }

    .ivu-upload-drag {
      border-width: 1px;
      border-color: #fff;
    }

    .ivu-upload-drag:hover,
    .ivu-upload-dragOver {
      border-color: #2d8cf0;
    }

    .continue {
      display: inline-block;
      color: #2296f4;
      cursor: pointer;

      .con {
        text-decoration: underline;
        font-weight: normal;
      }
    }
  }
</style>
